<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:ui="http://java.sun.com/jsf/facelets"                        
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"      >
    <h:head>     
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/menu.css" rel="stylesheet" type="text/css" />
        <title>Blue Pumpkin Admin Page</title>
    </h:head>
    <h:body>
        <div class="main_body_admin" >
            <div class="separator_div"/>
            <div class="admin_logo"/>

            <h:form id="frmMain">
                <p:menubar style="text-align: center" >
                    <p:menuitem value="Event" actionListener="#{naviagtionControl.redirectToEventPage()}" > </p:menuitem> 
                    <p:menuitem value="Prize" actionListener="#{naviagtionControl.redirectToPrizePage()}" ></p:menuitem> 
                    <p:menuitem value="User"  style="color: blueviolet; font-weight: bold" styleClass="admin_menu_current" ></p:menuitem> 
                    <p:menuitem value="FAQ"  actionListener="#{naviagtionControl.redirectToFAQsPage()}" ></p:menuitem> 
                    <p:menuitem value="Contact" actionListener="#{naviagtionControl.redirectToContactPage()}"  ></p:menuitem> 
                    <p:menuitem value="Registration" actionListener="#{naviagtionControl.redirectToRegistrationPage()}" ></p:menuitem> 
                    <p:menuitem value="Winner" actionListener="#{naviagtionControl.redirectToWinnerPage()}"  ></p:menuitem> 
                    <p:menuitem value="Comment" actionListener="#{naviagtionControl.redirectToCommentsPage()}"  ></p:menuitem> 
                    <p:submenu label="#{userControl.user.fullName}"    >
                         <p:menuitem value="Edit Profile" actionListener="#{userControl.redirectToLogonUserPage()}" ></p:menuitem> 
                        <p:menuitem value="Log out" actionListener="#{userControl.logout()}"  ></p:menuitem> 
                    </p:submenu>

                </p:menubar>
            </h:form>

            <div class="content_display">
                <h:form id="frmToolbar">
                    <p:toolbar>
                        <p:toolbarGroup>
                            <p:commandButton value="Add User" actionListener="#{userControl.redirectToAddUserPage()}"/>
                            <p:commandButton value="View Users" actionListener="#{userControl.redirectToListUserPage()}" />

                        </p:toolbarGroup>
                    </p:toolbar>
                </h:form>
                <p:spacer height="5px" />

                <f:view>

                    <p:panel style="width: 99%;" header="User Manager" id="pnlUserPage">



                        <p:dialog modal="false" widgetVar="statusDialog" header="Status"   onHide=""
                                  draggable="true" closable="true">  
                            <p:graphicImage value="/resources/images/ajax_loading_bar.gif" />  
                        </p:dialog>  
                        <p:dialog modal="false" widgetVar="statusDialogFn" header="Finish" transient="true"
                                  draggable="true" closable="true">  
                            <h:form>
                                <h:panelGrid columns="1">
                                    <h:outputText value="Password is reseted." />
                                    <p:spacer height="10px" />
                                    <p:commandButton value="OK" onclick="statusDialogFn.hide();" />
                                </h:panelGrid>
                            </h:form>
                        </p:dialog>  

                        <h:form id="form" >

                            <p:growl id="grlt" autoUpdate="true" showDetail="true" redisplay="true" transient="true" />

                            <p:dataTable id="userb" value="#{userControl.allUser}" var="item" paginator="true" rows="5" tableStyle="width:auto" widgetVar="carsTable" emptyMessage="No Event found with given criteria">                                                              
                                <f:facet name="header">                            
                                    <p:outputPanel>                                
                                        <h:outputText value="Search all fields:" />  
                                        <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />  
                                    </p:outputPanel>  
                                </f:facet>
                                <p:column headerText="Avata">                                
                                    <h:commandLink value="" actionListener="#{userControl.redirectToUserDetailPage()}" >
                                        <img src="#{item.avatar}" height="100" width="70" />
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                                    </h:commandLink>
                                </p:column>

                                <p:column filterBy="#{item.username}" sortBy="#{item.username}" headerText="UserName"  filterMatchMode="contains" >               

                                    <h:commandLink value="#{item.username}" actionListener="#{userControl.redirectToUserDetailPage()}" 
                                                   style="color: blue;word-wrap: break-word; width: 120px ; text-decoration: none" >                                       
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                                    </h:commandLink>
                                </p:column>

                                <p:column filterBy="#{userControl.convertSex(item)}"  sortBy="#{userControl.convertSex(item)}" headerText="Gender"  filterOptions="#{userControl.sexoption()}" filterMatchMode="exact">                                
                                    <h:outputText value="#{userControl.convertSex(item)}"/>
                                </p:column>

                                <p:column headerText="FullName" filterBy="#{item.fullName}" sortBy="#{item.fullName}">                                

                                    <h:commandLink value="#{item.fullName}" actionListener="#{userControl.redirectToUserDetailPage()}" 
                                                   style="color: blue;word-wrap: break-word; width: 120px ; text-decoration: none" >                                       
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                                    </h:commandLink>
                                </p:column>

                                <p:column headerText="Birthday">                                
                                    <h:outputText value="#{item.dob}">
                                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                    </h:outputText>
                                </p:column>



                                <p:column >  
                                    <p:commandButton id="selectButton" ajax="true" update=":form:display" oncomplete="carDialog.show()" icon="ui-icon-search" title="View">  
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />  
                                    </p:commandButton>  
                                </p:column>
                                <p:column>
                                    <p:commandButton style="font-size: 11px;" ajax="false" value="Update" actionListener="#{userControl.redirectToEditUserPage()}" icon="ui-icon-arrowrefresh-1-w" >  
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                                    </p:commandButton>
                                </p:column>

                                <p:column >


                                    <p:commandButton style="font-size: 11px;" value="Delete"  onclick="confirmation.show()" icon="ui-icon-close" >
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                                    </p:commandButton>
                                    <p:confirmDialog id="confirmDialog" message="Are you sure about delete this User?"  
                                                     header="Initiating destroy process" severity="alert" widgetVar="confirmation">
                                        <p:commandButton id="confirm" style="font-size: 11px;" actionListener="#{userControl.delete(userControl.selectedtuser)}" value="Yes Sure" oncomplete="confirmation.hide()"/>
                                        <p:commandButton id="decline" style="font-size: 11px;" value="Not Yet" onclick="confirmation.hide()" />   
                                    </p:confirmDialog>
                                </p:column>
                                <p:column >
                                    <p:commandButton style="font-size: 11px;" onclick="statusDialog.show();" oncomplete="statusDialog.hide();statusDialogFn.show();" value="Reset Password" update=":form:grlt"
                                                     actionListener="#{userControl.resetPasswordAndSendMail(item)}"  >  
                                        <f:setPropertyActionListener value="#{item}" target="#{userControl.selectedtuser}" />
                                    </p:commandButton>
                                </p:column>
                            </p:dataTable>

                            <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"  
                                      showEffect="clip" hideEffect="fold" id="dialog" modal="true" >  
                                <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                                    <f:facet name="header">    <a href="#"><img src="#{userControl.selectedtuser.avatar}" height="100" width="70" /></a> 
                                    </f:facet>  

                                    <h:outputText value="UserName:" />  
                                    <h:outputText value="#{userControl.selectedtuser.username}" style="font-weight:bold"/>  


                                    <h:outputText value="FullName" />  
                                    <h:outputText value="#{userControl.selectedtuser.fullName}" style="font-weight:bold"/>  

                                    <h:outputText value="Gender:" />  
                                    <h:outputText value="#{userControl.convertSex(userControl.selectedtuser)}"/>

                                    <h:outputText value="Phone:" />  
                                    <h:outputText value="#{userControl.selectedtuser.phone}" style="font-weight:bold"/>  

                                    <h:outputText value="Email:" />  
                                    <h:outputText value="#{userControl.selectedtuser.email}" style="font-weight:bold"/>

                                    <h:outputText value="Address:" />  
                                    <h:outputText value="#{userControl.selectedtuser.address}" style="font-weight:bold"/>

                                    <h:outputText value="Birthday:" />  
                                    <h:outputText value="#{userControl.selectedtuser.dob}" style="font-weight:bold"/>

                                    <h:outputText value="DepartmentName:" />  
                                    <h:outputText value="#{userControl.selectedtuser.department}" style="font-weight:bold"/>

                                    <h:outputText value="Is Admin"/>
                                    <h:outputText value="#{userControl.selectedtuser.isAdmin}" style="font-weight: bold"/>

                                    <h:outputText value="Is Active"/>
                                    <h:outputText value="#{userControl.selectedtuser.active}" style="font-weight: bold"/>

                                </h:panelGrid>    
                            </p:dialog>


                        </h:form>
                    </p:panel>
                </f:view>
            </div>
        </div>
    </h:body>
</html>
